import type { DeckDetail, DeckInfoCardItem } from '/@/api/currentDeck/model/deckModel';
import { defineComponent, reactive, ref, unref, onMounted, onUnmounted } from 'vue';
import { awaitWrap } from '/@/utils';
import { DeckImageDetailApi } from '/@/api/currentDeck/deck';
import { Skeleton } from 'vant';
import setting from '/@/settings/projectSetting';

import('./index.less');

export default defineComponent({
  name: 'CurrentDeckImagePage',
  props: {
    deckId: {
      type: String as PropType<string>,
      required: true,
    },
    small: {
      type: Boolean as PropType<boolean>,
      required: true,
    },
  },
  setup(props) {
    onMounted(() => {
      document.body.classList.add('padding-zero');
    });
    onUnmounted(() => {
      document.body.classList.remove('padding-zero');
    });
    const deckDetailInfo = reactive<DeckDetail>({} as DeckDetail);
    const loadingState = ref(true);
    const getDetail = async () => {
      const [error, data] = await awaitWrap(DeckImageDetailApi({ deck_id: Number(props.deckId) }));
      if (error) {
        return false;
      }
      const result = data as DeckDetail;
      for (const item in result) {
        deckDetailInfo[item] = result[item];
      }
      loadingState.value = false;
    };
    getDetail();

    const SmallCardItems = ({ cardList }: { cardList: DeckInfoCardItem[] }) => {
      return (
        <ul class={'small-sel-card-area flex flex-wrap'}>
          {cardList.map((item) => {
            return (
              <li class={'sel-card-item'}>
                <div class={'image'}>
                  <img src={item.img} alt='' />
                </div>
                {/*<div class={'name-box'}>
                  <div class={'name-content van-ellipsis text-xs px-md'}>{item.name}</div>
                </div>*/}
                {item.number! > 1 ? (
                  <div class={'nums'}>
                    <span>×{item.number}</span>
                  </div>
                ) : null}
              </li>
            );
          })}
        </ul>
      );
    };
    const CardItems = ({ cardList }: { cardList: DeckInfoCardItem[] }) => {
      return (
        <ul class={'sel-card-area flex flex-wrap'}>
          {cardList.map((item) => {
            return (
              <li class={'sel-card-item'}>
                <div class={'image'}>
                  <img src={item.img} alt='' />
                </div>
                <div class={'name-box'}>
                  <div class={'name-content van-ellipsis text-xs px-md'}>{item.name}</div>
                </div>
                {item.number! > 1 ? (
                  <div class={'nums'}>
                    <span>X{item.number}</span>
                  </div>
                ) : null}
              </li>
            );
          })}
        </ul>
      );
    };

    const CardListBox = (): any => {
      const { small } = props;
      if (small) {
        return unref(deckDetailInfo).deck_info.map((item) => {
          return (
            <div class={`cards-box small rounded ${!item.card_number ? 'hidden' : ''}`}>
              {/*<h2 class={'text-sm text-white mb-sm'}>
                {item.group_name}：<span>{item.card_number}</span>
              </h2>*/}
              <SmallCardItems cardList={item.card_list} />
            </div>
          );
        });
      }
      return unref(deckDetailInfo).deck_info.map((item) => {
        return (
          <div class={`cards-box rounded ${!item.card_number ? 'hidden' : ''}`}>
            <h2 class={'text-sm text-white mb-sm'}>
              {item.group_name}：<span>{item.card_number}</span>
            </h2>
            <CardItems cardList={item.card_list} />
          </div>
        );
      });
    };

    return () => (
      <div class={['current-deck-image-page', { small: props.small }]}>
        <Skeleton title row={5} avatar loading={loadingState.value}>
          <h1 class={'text-40px text-white mb-37px pl-14px'}>{unref(deckDetailInfo).deck_name}</h1>
          <CardListBox />
          <div class={'logo-box flex justify-between items-center px-sm'}>
            <div class={'info'}>
              <div class='text-sm text-white'>{unref(deckDetailInfo).nickname}</div>
              <div class='text-sm text-white'>创建于 旅法师营地App</div>
              <div class={'w-274px h-66px mt-20px'}>
                <img class={'w-full h-full'} src={`${setting.imgUrlCdn}web_h5/activity/watermark/yd_logo.png`} />
              </div>
            </div>
            <div class={'w-150px h-150px'}>
              <img class={'w-full h-full'} src={`${setting.imgUrlCdn}web_h5/activity/watermark/yd_code.png`} />
            </div>
          </div>
        </Skeleton>
      </div>
    );
  },
});
